<template>
<div>
  <el-card style="height: 40%;width: 100%">
  <div>
    
    <!-- 上传照片 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
          <div class="warp_l__34yS8">
          ♊&nbsp;&nbsp;<span class="work__00001">设计作品</span>
        </div>
        <div class="warp_r__1-t6m">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="action='https://jsonplaceholder.typicode.com/posts/'">添加</span>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div style="padding-top:15px" >
    <div style="padding-bottom:10px;"><font style="font-size:20px"><b>上传图片</b></font></div>
      <el-upload
      action="http://localhost:8868/api/resume/file/upload"
      list-type="picture-card"
      :file-list="images"
      :on-success="handleAvatarSuccess"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
  <div style="padding-top:15px" >
    <div style="padding-bottom:10px;"><font style="font-size:20px"><b>上传文件</b></font></div>
      <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8868/api/resume/file/upload"
      :on-success="handleDucomentSuccess"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">只能上传文件，将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
  <div v-if="documentList!=null">
    <ol >
        <li v-for="(item,index) in documentList" :key="index" style="padding-bottom:10px">
          <font><a :href="item.document">{{item.document}}</a></font>
          <a style="margin-right: 50px;float: right;">
            <img style="width: 20px; height: 20px" @click="deldocument(item)" class="icon_d__8fzmg" alt="" src="">
          </a>
        </li>
    </ol>
  </div>
  </el-card>

  </div>
  
</template>

<script>
import ueditor from 'ueditor'
export default {
  name:'image',
   inject:['reload'],
  data(){
    return{
      user:{},
      resume:{},
      images:[],
      documentList:[]
    }
  },
  methods:{
    handleRemove(file, fileList) {
         this.$http({
              url: this.$http.adornUrl("/resume/image/deleteById/"),
              method: 'post',
              data: this.$http.adornData({
                'mageUrl': file.url,
                'resumeId': this.resume.id,
              })
            }).then(({data}) => {
             //this.reload();
            })
    },
    handleDucomentSuccess(res, file){
      this.$http({
              url: this.$http.adornUrl("/resume/document/save/"),
              method: 'post',
              data: this.$http.adornData({
                'document': res.messages,
                'resumeId': this.resume.id,
              })
            }).then(({data}) => {
             //this.reload();
            })
    },
    deldocument(item) {
         this.$http({
              url: this.$http.adornUrl("/resume/document/deleteById/"),
              method: 'post',
              data: this.$http.adornData({
                'document': item.document,
                'resumeId': item.resumeId,
              })
            }).then(({data}) => {
             this.reload();
            })
    },
    handleAvatarSuccess(res, file) {
      this.$http({
              url: this.$http.adornUrl("/resume/image/save/"),
              method: 'post',
              data: this.$http.adornData({
                'mageUrl': res.messages,
                'resumeId': this.resume.id,
              })
            }).then(({data}) => {
             //this.reload();
            })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpg';

      if (!isJPG) {
        this.$message.error('上传只能图片格式!');
      }
      return isJPG;
    },
    findByresumeId(){
     // this.user = JSON.parse(localStorage.getItem('user'));
       this.resume= JSON.parse(localStorage.getItem("resume"));
      this.$http({
              url: this.$http.adornUrl(`/resume/image/findByresumeId/${this.resume.id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              console.log(data);
              if(data.images!=''){
                this.images = data.images.map(t =>{
                  var obj = {};
                  obj.url = t.mageUrl;
                  return obj;
                })
                  this.$emit('resumTest')
              }
            })
      this.$http({
              url: this.$http.adornUrl(`/resume/document/findByresumeId/${this.resume.id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              if(data.documentList!=''){
                this.documentList = data.documentList;
                  this.$emit('resumTest')
              }
            })
    },
  },
  mounted(){
    this.findByresumeId();
}
}
</script>




<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
  .mod-home {
    line-height: 1.5;
  }
  .warp__1CDpL .warp_r__1-t6m .icon_style__xOInT {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .warp__1CDpL .warp_l__34yS8 {
    float: left;
  }

  .warp__1CDpL .warp_r__1-t6m {
    margin-right: 50px;
    float: right;
    font-size: 14px;
    font-weight: 400;
    color: #02B28A;
    line-height: 28px;
    cursor: pointer;
  }

  .a1{
    border-left: 3px solid #00B38A;
    height: 16px;
    position: absolute;
    top: 24px;
    left: 30px;
  }

  .work__00001{
    font-size: 20px;
    font-weight: 600;
    color: #040404;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

